<template>
  <el-row class="dashboard-container" :gutter="20">
    <el-col :span="6">
      <el-card>
        <div class="statistic-card">
          <el-statistic :value="todayLoginCount">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                Daily active users
                <el-tooltip
                  effect="dark"
                  content="Number of users who logged into the APP in one day"
                  placement="top"
                >
                  <el-icon style="margin-left: 4px" :size="12">
                    <Warning />
                  </el-icon>
                </el-tooltip>
              </div>
            </template>
          </el-statistic>
          <div class="statistic-footer">
            <div class="footer-item">
              <span>than yesterday</span>
              <span :class="growthRate > 0 ? 'green' : 'red'">
                {{ growthRate.toFixed(2) }}%
                <el-icon v-if="growthRate > 0">
                  <CaretTop /> <!-- 向上箭头 -->
                </el-icon>
                <el-icon v-else>
                  <CaretBottom /> <!-- 向下箭头 -->
                </el-icon>
              </span>
            </div>
          </div>
        </div>
        <template #footer>总注册用户数:{{totalUsers}}人</template>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card>
        <div class="statistic-card">
          <el-statistic :value="advertiseIncomeThisMonth">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                Advertisement Income
                <el-tooltip
                  effect="dark"
                  content="Advertisement Income this month"
                  placement="top"
                >
                  <el-icon style="margin-left: 4px" :size="12">
                    <Warning />
                  </el-icon>
                </el-tooltip>
              </div>
            </template>
          </el-statistic>
          <div class="statistic-footer">
            <div class="footer-item">
              <span>than last month</span>
              <span :class="incomeGrowth > 0 ? 'green' : 'red'">
                {{ incomeGrowth.toFixed(2) }}%
                <el-icon v-if="incomeGrowth > 0">
                  <CaretTop /> <!-- 向上箭头 -->
                </el-icon>
                <el-icon v-else>
                  <CaretBottom /> <!-- 向下箭头 -->
                </el-icon>
              </span>
            </div>
          </div>
        </div>
        <template #footer>总广告收入：{{totalIncome}}元</template>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card>
        <div class="statistic-card">
          <el-statistic :value="agenciesRegisteredThisMonth">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                New Registered Agencies
                <el-tooltip
                  effect="dark"
                  content="Number of Agencies who Registered this month"
                  placement="top"
                >
                  <el-icon style="margin-left: 4px" :size="12">
                    <Warning />
                  </el-icon>
                </el-tooltip>
              </div>
            </template>
          </el-statistic>
          <div class="statistic-footer">
            <div class="footer-item">
              <span>than last month</span>
              <span class="green">
                {{agenciesRegisteredGrowth.toFixed(2)}}%
                <el-icon>
                  <CaretTop />
                </el-icon>
              </span>
            </div>
          </div>
        </div>
        <template #footer>入驻旅行社总量：{{ agenciesRegisteredTotal }}个</template>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card>
        <div class="statistic-card">
          <el-statistic :value="designersRegisteredThisMonth">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                New Registered Service Designers
                <el-tooltip
                  effect="dark"
                  content="Number of service designers who registered this month"
                  placement="top"
                >
                  <el-icon style="margin-left: 4px" :size="12">
                    <Warning />
                  </el-icon>
                </el-tooltip>
              </div>
            </template>
          </el-statistic>
          <div class="statistic-footer">
            <div class="footer-item">
              <span>than last month</span>
              <span class="green">
                {{designersRegisteredGrowth.toFixed(2)}}%
                <el-icon>
                  <CaretTop />
                </el-icon>
              </span>
            </div>
          </div>
        </div>
        <template #footer>入驻定制官总量：{{designersRegisteredTotal}}人</template>
      </el-card>
    </el-col>
  </el-row>
  <div class="main-container">
    <div class="carousel-container">
      <h3 style="color: dimgray;">本月热门景点</h3>
      <el-carousel :interval="4000" type="card" height="400px">
        <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
          <img :src="item.imageUrl" alt="carousel image" style="width: 100%; height: 100%; object-fit: cover;" />
          <span>{{item.imageName}}</span>
        </el-carousel-item>
      </el-carousel>      
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted} from 'vue';
import axios from 'axios';
import dunhuang from '@/assets/carousel/dunhuang.png';
import gugong from '@/assets/carousel/gugong.png';
import wuzhen from '@/assets/carousel/wuzhen.png';

const todayLoginCount = ref(0); // 今日登录人数
const yesterdayLoginCount = ref(0); // 昨日登录人数
const growthRate = ref(0); // 同比增长率
const totalUsers = ref(0);

const advertiseIncomeThisMonth = ref(0);
const incomeGrowth = ref(0);
const totalIncome = ref(0);

const agenciesRegisteredThisMonth = ref(0);
const agenciesRegisteredGrowth = ref(0);
const agenciesRegisteredTotal = ref(0);

const designersRegisteredThisMonth = ref(0);
const designersRegisteredGrowth = ref(0);
const designersRegisteredTotal = ref(0);

const carouselItems = ref([
  { imageUrl: dunhuang ,imageName:"敦煌"},
  { imageUrl: gugong ,imageName:"故宫"},
  { imageUrl: wuzhen ,imageName:"乌镇"}
]);

const calculateGrowthRate = (current, previous) => {
  if (previous > 0) {
    return ((current - previous) / previous) * 100;
  } else {
    return current > 0 ? 100 : 0;
  }
};

const fetchLoginCounts = async () => {
  try {
    const todayResponse = await axios.get("http://localhost:8088/users/getTodayLogins");
    todayLoginCount.value = todayResponse.data;

    const yesterdayResponse = await axios.get("http://localhost:8088/users/getYesterdayLogins");
    yesterdayLoginCount.value = yesterdayResponse.data;

    const totalUsersResponse = await axios.get("http://localhost:8088/users/getTotalCount");
    totalUsers.value = totalUsersResponse.data;

    growthRate.value = calculateGrowthRate(todayLoginCount.value, yesterdayLoginCount.value);
  } catch (error) {
    console.error("获取登录统计数据失败:", error);
  }
};

const fetchAdvertisementsData = async () => {
  try {
    const response = await axios.get('http://localhost:8088/advertisements/getAdvertisementIncomeByMonth');
    const data = response.data;

    advertiseIncomeThisMonth.value = data[0]?.total_income || 0;
    const advertiseIncomeLastMonth = data[1]?.total_income || 0;

    incomeGrowth.value = calculateGrowthRate(advertiseIncomeThisMonth.value, advertiseIncomeLastMonth);
    // 使用 reduce 方法计算 total_income 总和
    totalIncome.value = data.reduce((sum, item) => sum + item.total_income, 0);
  } catch (error) {
    console.error('获取数据错误: ', error);
  }
};

const fetchAgenciesRegisteredData = async () => {
  try {
    const response = await axios.get('http://localhost:8088/agencies/getAgenciesCountByMonth');
    const data = response.data;

    agenciesRegisteredThisMonth.value = data[0]?.count || 0;
    const agenciesRegisteredLastMonth = data[1]?.count || 0;

    agenciesRegisteredGrowth.value = calculateGrowthRate(agenciesRegisteredThisMonth.value, agenciesRegisteredLastMonth)
    agenciesRegisteredTotal.value = data.reduce((sum, item) => sum + item.count, 0);
  }catch (error) {
    console.error('获取数据错误: ', error);
  }
};

const fetchDesignersRegisteredData = async () => {
  try {
    const response = await axios.get('http://localhost:8088/servicedesigners/getServicedesignersCountByMonth');
    const data = response.data;

    designersRegisteredThisMonth.value = data[0]?.count || 0;
    const designersRegisteredLastMonth = data[1]?.count || 0;

    designersRegisteredGrowth.value = calculateGrowthRate(designersRegisteredThisMonth.value, designersRegisteredLastMonth)
    designersRegisteredTotal.value = data.reduce((sum, item) => sum + item.count, 0);
  }catch (error) {
    console.error('获取数据错误: ', error);
  }
}

onMounted(() => {
  fetchLoginCounts();
  fetchAdvertisementsData();
  fetchAgenciesRegisteredData();
  fetchDesignersRegisteredData();
});

</script>

<style scoped>
.el-statistic {
  --el-statistic-content-font-size: 28px;
}

.statistic-card {
  padding: 10px;
  border-radius: 5px;
  background-color: var(--el-bg-color-overlay);
}

.main-container {
  margin-top: 10px;
  height: 600px;
  background-color: var(--el-bg-color-overlay);
  border-radius: 5px;
  display: flex;             /* 使用 Flexbox 布局 */
  justify-content: center;   /* 横向居中 */
  align-items: center; 
}

.carousel-container {          
  text-align: center; 
  width: 90%;  /* 设定轮播图的宽度 */
  max-width: 1200px;  /* 最大宽度可以根据需求调整 */
  height: 90%;  /* 控制轮播图的高度，可以根据需求调整 */
}

img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}
.red {
  color: var(--el-color-error);
}
</style>